// 提取公共样式封装为函数混合样式
@mixin jd-sprites($x,$y){
        background-image: url("../images/jd-sprites.png");
        background-size: 200px 200px;
        background-position: $x $y;
}
// 设置主题颜色变量样式
$jd_color: #c91523;

// 头部部分样式
header {
    display: flex;
    background-color:rgba(201, 21, 35, 0);
    height:40px; 
    position: fixed;
    width: 100%;
    z-index:99;
    .logo{
        width: 70px;
        // 调用公共样式
        @include jd-sprites(0,-110px);
        // 扩大背景图片的响应区域
        background-origin: content-box;
        background-clip: content-box;
        padding: 10px 6px;
    }
    .search{
        flex: 1;
        padding: 5px 0;
        position: relative;
        input{
            height: 100%;
            width: 100%;
            border-radius: 15px;
            text-indent: 30px;
        }
        &::after{
            position: absolute;
            display: block;
            content: "";
            @include jd-sprites(-60px,-110px);
            width: 20px;
            height: 20px;
            // background-color: pink;
            top: 10px;
            left: 8px;
        }
    }   
    .login{
        width: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
    }
}

//轮播图样式
.silder{
    overflow: hidden;
    position: relative;
    .silder_ul{
        width: 1000%;
        display: flex;
        li{
            flex:1;
        }
    }
    // 索引器
    .indexer{
        position: absolute;
        bottom: 5px;
        left: 50%;
        transform: translateX(-50%);
        li{
            float: left;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border: 1px solid #fff;
            margin: 0 3px;
            opacity: 0.5;
            transition:  all 0.3s ;
        }
        .current{
            background-color: #fff;
            opacity: 1;
            transform: scale(1.5);
        }
    }
} 

// 商品分类导航样式
nav{
    ul{
        display: flex;
        flex-wrap: wrap;
        li{
             width: 25%;
            a{
                text-align: center;
                color: #666;
                font-size: 14px;
                padding: 5px 0;
                img{
                    width: 45%;
                    margin: 0 auto;
                }
            }
        }
    }
   
}

// 分割线
.line{
    background-color: #f5f5f5;
    height: 10px;
}

// 掌上秒杀样式
.second_kill{
    margin-top: 5px;
    .second_kill_title{
        display: flex;
        justify-content: space-around;
        .clock{
            width: 18px;
            height: 22px;
            // 引用封装的函数
            @include jd-sprites(-83px,-110px);
        }
        .second_kill_text{
            margin-left: -25px;
            color: $jd_color;
        }
        .second_kill_time{
            margin-left: -25px;
            span{
                background-color: #000;
                color: #fff;
                padding: 0 2px;
            }
            span:nth-child(3n){
                background-color: #fff;
                color: #000;
            }
        }
        .second_kill_more{
            font-size: 14px;
            margin-right: -10px;
        }
    }
    .second_kill_prod{
        ul{
            display: flex;
            li{
                flex: 1;
                position: relative;
                text-align: center;
                font-size: 14px;
                img{
                    width: 90%;
                    margin-top: 15px;
                }
                span{
                    position: absolute;
                    top: 50%;
                    right: 10%;
                    width: 46px;
                    height: 28px;
                    line-height: 28px;
                    border-radius: 50%;
                    background-color: #fdb60a;
                    color: #fff;
                }
                p{
                    color: $jd_color;
                }
            }
        }
    }
}

// 主题日样式
.theme_day{
    .theme_day_title{
        position: relative;
        ul{
            position: absolute;
            bottom: 5px;
            // 块级元素不设置宽度,默认是继承父元素的宽; 设置了定位,则宽度优内容撑开.
            width: 100%;
            li{
                float: left;
                width: 50%;
            }
        }
    }
    .theme_day_prod{
        ul{
            display: flex;
            flex-wrap: wrap;
            li{
                width: 50%;
            }
            li:nth-child(-n+3){
                width: 33.33%;
            }
        }
    }
}

// 广告
.banner{
    padding: 5px;
}

// 特色超市样式
.feature_market{
    .feature_market_title{
        color: $jd_color;
        font-weight: 600;
        padding: 5px;
    }
    .feature_market_prod{
        ul{
            li{
                float: left;
                width: 50%;
            }
            // bug.因为浮动,第2和3张图片的高度之和精度缺失,高度比第一张短,造成浮动布局乱的现象. 可以给第三张增大高度; 也可以清楚第四张浮动;
            li:nth-child(3){
                padding-bottom: 1px;
            }
            li:nth-child(4){
                clear: both;
            }
        }
    }
}

// 主题街样式
.theme_street{
    .theme_street_title{
        padding: 5px;
        color: $jd_color;
        font-weight: 600;
    }
    .theme_street_prod{
        ul{
            li{
                float: left;
                width: 25%;
            }
            li:nth-child(-n+2){
                width: 50%;
            }
            li:nth-child(5){
                clear: both;
            }
        }
    }
}

// 品牌推荐
.brand_recom{
    .brand_recom_title{
        padding: 5px;
        color: $jd_color;
        font-weight: 600;
    }
    ul{
        li{
            float: left;
            width: 30%;
        }
        li:nth-child(1){
            width: 40%;
        }
    }
}

// 猜你喜欢
.youlike{
    .youlike_title{
        padding: 5px;
        color: $jd_color;
        span{
            float: left;
            font-weight: 600;     
        }
        a{
            float:right;
            display: flex;
            font-size: 13px;
            img{
                width: 18px;
                height: 18px;
                margin: 2px 3px 0 0;
            }
        }
    }
    .youlike_prod{
        ul{
            li{
                float: left;
                width: 50%;
                padding: 10px 10px 0;
                div{
                    display: flex;
                    justify-content: space-between;
                    span{
                        color: $jd_color;
                    }
                    a{
                        font-size: 13px;
                        border: 1px solid #ccc;
                    }
                }
                p{
                    height: 40px;
                    overflow: hidden;
                    font-size: 14px;
                    border-bottom: 1px solid #ccc;
                }
            }
        }
    }
}

// 点击更多
.about_more{
    margin-top: 5px;
    background-color: #f3f5f7;
    color: #666;
    .click_more{
        height: 40px;
        font-size: 14px;
        text-align: center;
        line-height: 40px;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
    }
    .nav_more{
        display: flex;
        padding: 10px;
        text-align: center;
        font-size: 14px;
        a{
            flex: 1;
        }
        a:nth-last-child(-n+3){
            border-left: 1px solid #666;
        }
    }
    .other_versions{
        display: flex;
        padding: 10px;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        a{
            flex: 1;
            font-size: 14px;
            text-align: center;
            span{
                display: inline-block;
                width: 33px;
                height: 33px;
            }  
        }
        a:nth-child(1) span{
            @include jd-sprites(-120px,-70px);
        }
        a:nth-child(2) span{
            @include jd-sprites(-40px,-70px);
        }
        a:nth-child(3) span{
            @include jd-sprites(-80px,-70px);
        }  
    }
    .copyright{
        padding: 20px;
        font-size: 14px;
        margin-bottom: 45px;
        text-align: center;
    }
}

// 底部样式
footer{
    .footer_nav{
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 99;
        width: 100%;
        background-color: #fff;
        a{
            flex: 1;
            img{
                margin: 0 auto;
                width: 60px;
            }
        }
    }
   
}